<template>


 <a-modal :visible="true" :footer="null" :width="700" @cancel="cancelEvent" class="orderModal">
  <div class="infoModal">车辆编辑</div>
  <a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"  class="formVideoModel">
    <a-form-model-item label="所属区域" ref="county"  prop="county" :autoLink="false">
      <a-cascader v-model="form.county" :options="options" placeholder="请选择省市区县" @change="validateField"/>
      <!-- <CitySelect v-model="form.county" @update="validateField"   :fromCityList.sync="form.county" ></CitySelect> -->
    </a-form-model-item>
    <a-form-model-item label="关联合同名称" ref="contractName"  prop="contractName">
     <ContractSelect v-model="form.contractName"  @update="validateFieldContractName"  v-bind:fromCityList="form.contractName"></ContractSelect>
    </a-form-model-item>
    <a-form-model-item label="车牌号" ref="carNumber"  prop="carNumber">
      <a-input v-model="form.carNumber" />
    </a-form-model-item>
    <a-form-model-item label="车辆类型" ref="carType"  prop="carType">
      <a-radio-group v-model="form.carType">
        <a-radio :value="1">
          普通
        </a-radio>
        <a-radio :value="2">
          登高
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="负责人/驾驶人" ref="driver"  prop="driver"> 
      <a-input v-model="form.driver" />
    </a-form-model-item>
    <a-form-model-item label="联系方式/驾驶员手机" ref="driverMobile"  prop="driverMobile">
      <a-input v-model="form.driverMobile" />
    </a-form-model-item>
    <a-form-model-item label="产权属性" ref="property"  prop="property">
      <a-radio-group v-model="form.property">
        <a-radio :value="1">
          自购
        </a-radio>
        <a-radio :value="2">
          租赁
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
  
    <a-form-model-item :wrapper-col="{ span: 20, offset: 9 }">
      <a-button type="primary" @click="onSubmit" >
        提交
      </a-button>
      <a-button style="margin-left: 10px;" @click="cancelEvent">
        取消
      </a-button>
    </a-form-model-item>
  </a-form-model>
 </a-modal>
</template>
<script>
import { modifydwCar,getdwCarById } from '@/api/video'
import CitySelect from '@/views/videoManage/util/citySelect'
import ContractSelect from '@/views/videoManage/util/contractSelect'
import AreaJson from '@/views/videoManage/util/area'
export default {
  props:['info'], 
  components:{CitySelect,ContractSelect},
  data() {
    return {
      options:[],
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form: {},
      rules: {
        carNumber: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        carType: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        property: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        contractName: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        county: [{ required: true, message: '请选择区域', trigger: 'change' }],
        driver: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        driverMobile: [ 
          { required: true, message: '请输入电话', whitespace: true },
          { validator: this.phoneCheck.bind(this) },],
       
      },
    };
  },
  created(){
   this.options = AreaJson 
   this.getdwCarByIdFunction(this.info.id)
  },
  mounted(){
    
  },
  methods: {
  //手动再验证 区县
     validateField(e) {
      this.form.county =e
      this.$refs.ruleForm.validateField('county');
     },
     validateFieldContractName(e){
      // this.contractName =e
      this.form.contractName =e
      this.$refs.ruleForm.validateField('contractName');
     },
   //获取详情
   getdwCarByIdFunction(id){
    getdwCarById(id).then((response)=>{
     this.form = response.data
     this.form.property = Number(this.form.property)
     this.form.county = this.form.county.split(",")
      console.log("1111")
     
    })
   },
    onSubmit() {
       this.$refs.ruleForm.validate((valid) => {
        if (valid) {     
            let form = JSON.parse(JSON.stringify(this.form)) 
            form.county = form.county.toString()
            modifydwCar(form).then((response) => {
              if (response != undefined) {
                if (response.code == 200) {
                  let type = 'success'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '编辑成功!',
                    duration: 3,
                  })
                  this.$emit('successEvent')
                }
              }
            })
         
        } else {
          return false
        }
      })
    },
    cancelEvent() {
      this.$emit('cancelEvent')
    },
    phoneCheck(rule, value, callbackFn) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(value)) {
        callbackFn('手机号码格式不正确')
        return
      }
      callbackFn()
    },
  },
};
</script>
